<template>
    <div>
        <h2>
            我是News父组件----
            {{msg}}
        </h2>
        
    
        <!-- 给子组件传值：属性，方法，对象自己this -->
        <!--  
        <v-content :titleA ="titleA" :run ='run' :home="this"></v-content>
        <button @click="run()">我是父组件run</button>
        -->
        <!-- 父组件主动获取子组件的数据和方法 -->
        <!-- <v-content ref="content"></v-content> -->
        <!-- <button @click="getChildAll()">获取子组件</button> -->
        <!-- 路由跳转 -->
        <ul>
            <li v-for="(item,key) in list">
                <router-link :to="'/getvalue/' + key">{{item}}--{{key}}</router-link>
            </li>
        </ul>
        <hr>
        <h1>我是get传值</h1>
                <ul>
            <li v-for="(item,key) in list">
                <router-link :to="'/getdata?aid=' + key">{{item}}--{{key}}</router-link>
            </li>
        </ul>
        
    </div>
</template>
<script>
/*
*父组件给子组件传值：
*1-父组件调用子组件的是时候----绑定动态属性
*         <v-content :title ="title"></v-content>
*2-在组件里面通过props接收父组件的数据传值
*3-props还可以接收父组件的方法,子组件可以传值给父组件
* 父组件可以把自己整个对象和属性，数据，方法传给子组件
*
*
*
*父组件主动获取子组件的数据和方法
*1-调用子组件的时候定义一个ref（dom 节点）
*    <v-content ref="content"></v-content>
*2-在父组件里面通过
*       this.$refs.content.属性
*        this.$refs.content.方法
*
*子组件主动获取父组件的数据和方法
*  this.$parent.数据
*this.$parent.方法
*** */
import content from './Content'
export default {
    data(){
        return{
            msg:'hello vue news',
            titleA:'我们是一个和谐的大家庭',
            list:[
               'news1343535',
                'news23453453',
                'news32543453453'

            ]

        }
    },
    components:{
         'v-content':content
    },
    methods:{
        // 主动获取子组件 $refs--子组件这个节点,子组件的所有属性和方法
        getChildAll(){
            this.$refs.content.contentAll();
           console.log(this.$refs.content.topAll);
        },
      run(option){
          alert('我是run 方法 ' + option +' ');
      }
    }

}
</script>

<style scoped>

</style>
